<template>
  <div class="app-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="150px" @submit.native.prevent>

      <el-form-item label="职位名称" prop="name">
        <el-input size="medium" placeholder="职位名称" v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="岗位类型" prop="postTypeId">
        <JobCascader @childByValue="setJob" ref="JobCascader"></JobCascader>

      </el-form-item>

      <el-form-item label="招聘人数" prop="number">
        <el-input size="medium" placeholder="招聘人数" v-model.number="form.number" style="width: 100px;"></el-input>
        人
      </el-form-item>

      <!-- <el-form-item label="工作地点">
        <el-input
          :autosize="{ minRows: 1, maxRows: 1}"
          placeholder="详细地址"
          v-model="form.addressDetail"
          style="width: 400px">
        </el-input>
        <div class="ele-map" style="margin-top: 50px">
          <elMap @childByValue="setJob"></elMap>
        </div>
      </el-form-item> -->
        <el-form-item label="薪资待遇" required>
          <el-form-item prop="salaryMin" style="display: inline-block">
            <el-input size="medium" placeholder="0" v-model="form.salaryMin" style="width: 120px;"></el-input>元
          </el-form-item>
          <span class="line">-</span>
          <el-form-item prop="salaryMax" style="display: inline-block">
              <el-input size="medium" placeholder="0" v-model="form.salaryMax" style="width: 120px;"></el-input>元
          </el-form-item>
        </el-form-item>

      <el-form-item label="经验要求" prop="experienceMin">
        <el-input size="medium" placeholder="填0为不限" v-model="form.experienceMin" style="width: 120px;"></el-input>
        年以上
      </el-form-item>
      <el-form-item label="最低学历" prop="educationTypeId">
        <el-select v-model="form.educationTypeId" placeholder="请选择">
          <el-option
            v-for="item in educationList"
            :key="item.value"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="求职城市" prop="addressDetail">
        <CitySelect @childByValue="setCtiy" ref="citySelect"></CitySelect>
      </el-form-item>

      <el-form-item label="职位详情" prop="postDescription">
        <el-input
          type="textarea"
          :rows="15"
          placeholder="请输入内容"
          v-model="form.postDescription">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {publish} from '@/api/web/post'
  import {Message} from 'element-ui'
  import elMap from '@/components/Map'
  import {fetchList, fetchCitiesList, fetchTreeList} from '@/api/web/dictionary'
  import JobCascader from '@/components/jobCascader/'
  import WorkExp from '@/components/WorkExp/'
  import CitySelect from '@/components/CitySelect/'

  export default {
    components: {elMap,JobCascader,WorkExp,CitySelect},
    data() {
      return {
        form: {
          name: "",
          postTypeId: "0",
          number: "",
          addressDetail: "",//详细地址,
          addressLatitude: "",
          addressLongitude: "",
          salaryMin: "",
          salaryMax: "",
          experienceMin: "",
          experienceMax: "",
          educationTypeId: "",
          postDescription: "",
        },
        educationList: [],
        postList:[],
        rules: {
          name: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
          postTypeId: [{ required: true, message: '请选择岗位类型', trigger: 'blur' }],
          number: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }],
          salaryMin: [{ required: true, message: '请输入薪资待遇', trigger: 'blur' }],
          salaryMax: [{ required: true, message: '请输入薪资待遇', trigger: 'blur' }],
          experienceMin: [{ required: true, message: '请输入经验要求', trigger: 'blur' }],
          educationTypeId: [{ required: true, message: '请选择最低学历', trigger: 'blur' }],
          addressDetail: [{ required: true, message: '请选择求职城市', trigger: 'blur' }],
          postDescription: [{ required: true, message: '请输入职位详情', trigger: 'blur' }]
        }
      }
    },
    computed: {
      getRouter () {
        return this.$route.path
      }
    },
    methods: {
      submit(formName) {
        // TODO form 校验
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.getRouter === '/position/edit') {
              this.form.postId = this.form.id
              this.$fetch(this.$api.postUpgrade, this.form).then(res => {
                if (res.code === 0) {
                  this.$message.success('职位修改成功')
                  this.$router.push({path: '/position/index'})
                }
              })
            } else {
              publish(this.form).then(response => {
                Message.success('新增成功')
                this.$router.push({path: '/position/index'})
              })
            }
          } else {
            return false;
          }
        });
      },
      setJob(value){
        this.form.postTypeId=value[value.length-1]
      },
      childByValue(value) {
        this.form.addressLatitude = value[0]
        this.form.addressLongitude = value[1]
      },
      setCtiy (value) {
        this.form.addressDetail = value.join(',')
      }
    }, 
    created() {
      if (this.getRouter === '/position/edit') {
        this.$fetch(this.$api.getPostInfo + this.$route.query.id).then(res => {
          let data = res.data
          this.form = data
          this.$refs.JobCascader.editBackfill(data.postTypeId)
          this.$refs.citySelect.dataBackfill(+data.addressDetail.split(',')[0], +data.addressDetail.split(',')[1])
        })
      }
      fetchList('education').then(res => {
        this.educationList = res.data
      })
    }
  }
</script>

<style scoped>
  .el-input {
    width: 300px;
  }
</style>
